<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的云盘</title>
    <link rel="stylesheet" href="../../resource/element-ui/index.css">
    <script  src="../../resource/js/vue.js"></script>
    <script  src="../../resource/element-ui/index.js"></script>
    <script  src="../../resource/js/axios.js"></script>

</head>
<style>
    .folder{
        border: 1px solid #ffffff;
        height: 100px;
        width: 100px;
        margin-top:30px;
        float: left;
        text-align: center;
    }
    .folder:hover{
        border: 1px solid #f1f5fa;
        border-radius: 5px;
        background: #f1f5fa;
        cursor: pointer;

    }
    .pic_review{
        width: 100%;
        height: 100%;
    }
    .avatar-uploader{
        width: 100px;
        display: inline-block;
        float: left;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #222222;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #409EFF;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        display: inline-block;
    }
</style>
<body>
<div id="app">
<div style="display: block;overflow: hidden">
    <el-upload
            class="avatar-uploader"
            :action="'/uploadFile.do?path='+encodeUrl(path)"
            :show-file-list="false"
            :on-progress="onUpload"
            :on-success="uploadSuccess"
    >
        <i  class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-progress v-show="showProgress" :text-inside="true" :stroke-width="100" type="line" :percentage="percent" style="width: calc(100% - 100px);display: inline-block; float: left;"></el-progress>
</div>
        <div :title="item.name"  class="folder" v-for="item in fileList">
            <img @click="clickFolder(item)" class="" v-if="item.type=='directory'" src="resource/img/folder.png" >
            <img @click="downloadFile(item)" v-else-if="item.type=='file'&&(item.name.indexOf('.zip') != -1||item.name.indexOf('.rar') != -1||item.name.indexOf('.7z') != -1)" src="resource/img/zip.png">
            <img @click="downloadFile(item)" class="pic_review" v-else-if="item.type=='file'&&(item.name.indexOf('.jpg') != -1||item.name.indexOf('.png') != -1||item.name.indexOf('.jpeg') != -1)" :src="'/getPicture.do?path='+encodeUrl(item.path)">
            <img @click="downloadFile(item)" class="" v-else src="resource/img/file.png" >
            <div >{{item.name.length>9?item.name.substring(0,9)+'...':item.name}}</div>
        </div>


</div>
</body>
<script  src="resource/js/index.js"></script>
</html>
